@import "../../scss/plugin";

.bill-content{
  width: 100%;
  overflow: auto;
  padding: 20px;
  background-color: $bg-light;
}

.year-selector{
  display: flex;
  flex-flow: row wrap;
  &-item{
    @extend .btn-like;
    background-color: $bg-light;
    margin-right: 10px;
    padding: 5px 10px;
    @include border-radius($radius-mobile);
    label{
      line-height: 1.5;
      cursor: pointer;
    }
    input{
      display: none;
    }
    &.checked{
      background-color: $color-main;
    }
  }
}

.bill-container{
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
  align-items: flex-start;
}
.bill{
  flex-shrink: 0;
  overflow: hidden;
  background-color: white;
  margin-right: 20px;
  padding-bottom: 25px;
  @include border-radius($radius-pc);
  border: 1px solid $color-border-bill;
  .bill-header{
    justify-content: space-around;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    flex-flow: row nowrap;
    padding: 20px;
    .title{
      text-align: center;
      font-family: serif;
      line-height: 1.3;
      letter-spacing: 1px;
      font-size: $fz-huge;
      font-weight: bold;
    }
    .subtitle{
      margin-top: 5px;
      color: $text-label;
      font-size: $fz-title;
      text-align: center;
    }
  }

  .bill-brief{
    font-family: 'JetBrainsMonoDiary';
    background-color: #fafafa;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    padding: 15px 40px 20px;
    font-size: $fz-list-content;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }


  table{
    font-family: 'JetBrainsMonoDiary';
    font-size: $fz-small;
    tr{
      &:nth-child(even){
        background-color: $bg-lighter;
      }
      th{
        border-top: 1px solid $color-border;
        border-bottom: 1px solid $color-border-light;
        text-align: right;
        font-weight: bold;
        padding: 8px 15px 8px;
        &.center{
          text-align: center;
        }
      }
      td{
        white-space: nowrap;
        min-width: 80px;
        border-bottom: none;
        text-align: right;
        padding: 3px 10px;
        &.center{
          text-align: center;
        }
      }
      td.label{
        @extend .text-gray;
        white-space: nowrap;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left
      }
      &:last-child{
        td,th{
          border-bottom: 0;
        }
      }
      &:hover{
        td{
          background-color: $bg-menu;
          border-bottom-color: $bg-menu;
          color: white;
          .text-income{
            color: $yellow;
          }
          .text-gray{
            color: transparentize(white, 0.2);
          }
        }
      }
      &:nth-child(even){
        //background-color: transparentize(black, 0.95);
      }
    }
  }
  @include transition(all 0.5s);

  &:hover{
    @include transition(all 0.5s);
    //@include box-shadow(2px 2px 5px transparentize(black, 0.8))
  }
}

.bill-detail-list{
  font-size: $fz-list-content;
  td{
    padding: 2px 0 2px 5px;
    &.price{
      text-align: right;
    }
  }
}

// mobile
@media (max-width: $grid-separate-width-sm) {
  .bill-content{
    padding: 10px;
  }
  .bill-container{
    flex-flow: column nowrap;
  }
  .filter-panel{
    width: 100%;
  }

  .bill{
    margin-bottom: 20px;
    width: 100%;
    .bill-header{
      padding: 15px 10px 10px;
      .title{
        font-size: $fz-big;
      }
    }
    .bill-brief{
      line-height: 1.2;
      font-size: $fz-small;
      padding: 5px 50px;
    }
    table {
      width: 100%;
      tr{
        td{
          width: 40px;
          min-width: 40px;
          padding: 2px 5px 2px ;
          &.amount{
            width: 30px !important;
            min-width: 30px;
          }
          &.label{
            max-width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .bill-detail-list{
    font-size: $fz-small;
  }
}


@media (prefers-color-scheme: dark) {
  // BILL
  .bill-content{
    background-color: black;
  }


  .income{
    color: $gradient-aqua;
  }
  .output{
    color: $gradient-pumpkin;
  }
  .sum{
    color: $dark-text-title;
    &:after{
      background-color: $dark-border-active !important;
    }
  }

  .bill{
    border-color: $dark-border;
    background-color: $dark-bg-dark;
    .bill-header{
      .title{
        color: $dark-text-title;
      }
    }
    .bill-brief{
      color: $dark-text-title;
      background-color: $dark-bg-bill-brief;
      border-color: $dark-border-active;
    }

    .bill-sum-label{
      color: $dark-text-title;
    }
    table {
      font-size: $fz-small;
      tr {
        background-color: $dark-bg-td;
        border-color: $dark-border;
        th{
          border-color: $dark-border-active;
        }
        td{
          color: $dark-text-bill-price;
          &.label{
            color: $dark-text-title;
          }
        }
        &:nth-child(even) {
          background-color: $dark-bg-td-even;
        }
        &:hover{
          td{
            background-color: black;
            color: white;
          }
        }
      }
    }
  }


}
